/**
 * Created by levy on 16/8/1.
 */
import {shopping} from "../const/shopping";
import Input from "../components/form/InputText";

const lf = liefeng,
    R = React,
    RC = React.createClass,
    log = lf.utils.log,
    ajax = lf.utils.ajax,
    apiPrefix = shopping.api.prefix,
    api = shopping.api.address;

const addressId = lf.utils.getUrlParam('addressId') || '';

/**
 * props
 *  user
 */
const Root = RC({
    getInitialState() {
        return {
            detail: {},
            isTextSelected: false,
        }
    },
    //处理文本框函数
    focusFn() {
        this.setState({isTextSelected: true});
    },
    blurFn() {
        this.setState({isTextSelected: false});
    },
    componentWillMount() {
        let user = this.props.user,
            me = this;
        if (addressId) {
            ajax({
                url: apiPrefix + api.detail,
                data: {
                    addressId: addressId,
                }
            }, null, data => {
                this.setState({
                    detail: data
                });
            })
        }
    },
    componentDidMount() {
        let me = this,
            $form = $('form'),
            $consignee = $form.find('#consignee'),
            $mobile = $form.find('#mobile'),
            $address = $form.find('#address'),
            reg = /^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$/,
        //以下与地区相关
            $area = $('#area'),
            province,
            city,
            district,
        //给后台传城市id用
            provinceId,
            cityId,
            districtId;


        /* ------ 选择地区------*/
        const cityPicker = new mui.PopPicker({
            layer: 3
        });
        cityPicker.setData(cityData3);

        R.findDOMNode(this.refs.cityPicker).addEventListener('tap', function () {
            if (me.state.isTextSelected) {
                me.blurFn();
                lf.utils.slideDownKeyboard();
            }

            cityPicker.show(items => {
                province = (items[0] || {}).text;
                city = (items[1] || {}).text;
                district = (items[2] || {}).text || '';
                provinceId = (items[0] || {}).value;
                cityId = (items[1] || {}).value;
                districtId = (items[2] || {}).value || '';


                // console.log(value)

                this.value = province + ' ' + city + ' ' + district;

                console.log(this.value)
                console.log(provinceId + ' ' + cityId + ' ' + districtId);
            });
        });


        /* ------ 保存 ------*/
        R.findDOMNode(this.refs.save).addEventListener('touchend', function () {
            let consignee = $consignee.val().trim(),
                mobile = $mobile.val().trim(),
                address = $address.val().trim(),
                area = $area.val().trim();

            if (!consignee) {
                alert('请填写收货人');
                return;
            }

            if (!mobile) {
                alert('请填写手机号码');
                return;
            }
            
            if (!mobile.match(reg)) {
                alert('手机号码格式不正确');
                return;
            }

            if (!province) {
                if (!area) {
                    alert('请选择地区');
                    return;
                }
                //考虑编辑时使用原有的地址情况
                else {
                    let areaArr = area.split(' ');

                    //获取省份id
                    cityData3.map(data => {
                        if (data.text == areaArr[0]) {
                            //获取城市id
                            data.children.map(data => {
                                if (data.text == areaArr[1]) {
                                    //获取城镇id
                                    data.children.map(data => {
                                        if (data.text == areaArr[2]) districtId = data.value;
                                    })
                                    cityId = data.value;
                                }
                            })
                            provinceId = data.value;
                        }
                    })

                    // province = areaArr[0];
                    // city = areaArr[1];
                    // district = areaArr[2] || '';

                    console.log(provinceId, cityId, districtId)
                }
            }
            
            if (!address) {
                alert('请填写详细地址');
                return;
            }

            ajax({
                type: 'post',
                url: apiPrefix + api.save,
                data: {
                    id: addressId,
                    userId: me.props.user.globalId || (me.props.user.custLoginVo && me.props.user.custLoginVo.globalId),
                    consignee: consignee, //收货人
                    mobile: mobile,
                    province: provinceId,
                    city: cityId,
                    district: districtId,
                    address: address,
                }
            }, null, () => lf.appJs.doClose());
        });

    },
    render() {
        let data = this.state.detail,
            area = '';

        if (data.province) {
            area = data.province + ' ' + data.city + ' ' + data.district;
        }
        let value = $('#area').val();

        console.log(data);

        return <form className="address-manage-edit split-line">
            <div className="row border-bottom border-top flex">
                <p className="title">收货人:</p>
                <Input name="consignee" value={data.consignee}
                       focusFn={this.focusFn}/>
            </div>
            <div className="row border-bottom flex phone">
                <p className="title">联系号码:</p>
                <Input name="mobile" value={data.mobile}
                       focusFn={this.focusFn}/>
            </div>
            <div className="row border-bottom flex">
                <p className="title">所在地区:</p>
                <input className="lf-input" type="text" readOnly ref="cityPicker"
                       value={value ? value : area} id="area"/>
            </div>
            <div className="row flex">
                <p className="title">详细地址</p>
                <Input name="address" value={data.address}
                       focusFn={this.focusFn}/>
            </div>
            <div className="btn-wrapper">
                <div className="btn shopping-red-bg" ref="save">保存</div>
            </div>
        </form>
    }
});

lf.appJs.getUser(function (user) {
    R.render(<Root user={user}/>, document.getElementById('root'));
});